<template>
<panel>
    <div class="failure-statistic">
    <div class="total"></div>
      <pie :width="chartWidth" :height="chartHeight" :options="options" v-if="show"></pie>
    </div>
</panel>
</template>
<script>
import _ from 'lodash'
import formatDate from 'filters/format-date'
export default {
  name: 'openTotal',
  props: {
    data: {
      default () {
        return []
      }
    },
    controlInfo: {
      default () {
        return []
      }
    }
  },
  data () {
    return {
      chartWidth: '100px',
      chartHeight: '100px',
      tagName: '',
      show: false
    }
  },

  computed: {
    options () {
      let pieData = []
      if (this.controlInfo && this.controlInfo.length) {
        this.controlInfo.forEach(gate => {
          // 每扇门的数据
          let gateObj = {}
          gateObj.name = '1'
          let total = 0
          if (gate && gate.list && gate.list.length) {
            // 筛选出今天的开门数
            gateObj.name = gate.list[0].gateName || '-'
            let todaySum = _.filter(gate.list, item => {
              return item.openDate === formatDate(new Date(), 'yyyy-MM-dd', true)
            })
            if (todaySum && todaySum.length) {
              todaySum.forEach(item => {
                total += item.count
              })
            }
          }
          gateObj.value = total
          pieData.push(gateObj)
        })
      }
      return {
        // legend: {
        //   orient: 'vertical',
        //   right: 0,
        //   top: '20%',
        //   data: ['东侧门', '西北门', '东南门', '西南门'],
        //   textStyle: {
        //     color: '#fff'
        //   }
        // },
        title: {
          text: '今日开门次数占比统计',
          textStyle: {
            color: '#fff',
            fontStyle: 'normal',
            fontWeight: 100,
            fontSize: '13px'
          },
          x: 'center',
          bottom: 0
        },
        series: [
          {
            name: '开门次数',
            type: 'pie',
            radius: '60%',
            center: ['50%', '50%'],
            data: pieData,
            // data: [
            //     {value: 40, name: '东侧门'},
            //     {value: 40, name: '西北门'},
            //     {value: 60, name: '东南门'},
            //     {value: 60, name: '西南门'}
            //     // {value: 200, name: 'ETC'},
            //     // {value: 391, name: '在线支付'},
            //     // {value: 300, name: '现金'},
            //     // {value: 112, name: '预付费'}
            // ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ],
        color: ['#c33a31', '#5f9fa8', '#d58364', '#91c7ae']
      }
    }
  },

  mounted () {
    setTimeout(this.initialize, 900)
  },

  methods: {
    initialize () {
      this.chartWidth = `${this.$el.clientWidth - 10}px`
      this.chartHeight = `230px`
      this.show = true
    }
  }
}
</script>